<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI助手</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <style>
        :root {
            --primary-color: #6366f1;
            --primary-dark: #4f46e5;
            --primary-light: #a5b4fc;
            --dark-bg: #111827;
            --dark-card: #1f2937;
            --dark-input: #374151;
            --light-text: #f9fafb;
            --gray-text: #9ca3af;
            --border-radius: 16px;
            --message-radius: 18px;
            --transition: all 0.3s ease;
        }
        
        body {
            background-color: var(--dark-bg);
            color: var(--light-text);
            font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            position: relative;
        }
        
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            background-image: var(--bg-image, none);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-color: rgba(17, 24, 39, var(--bg-opacity, 0.95));
        }
        
        .container-fluid {
            padding: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            background-color: transparent;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: none;
            z-index: 1;
            box-shadow: none;
        }
        
        .header h1 {
            font-size: 20px;
            margin: 0;
            font-weight: 600;
            background: linear-gradient(to right, var(--primary-light), var(--primary-color));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .header-buttons {
            display: flex;
            gap: 10px;
        }
        
        .copy-btn, .settings-btn {
            background-color: rgba(75, 85, 99, 0.2);
            border: none;
            color: var(--light-text);
            padding: 7px 14px;
            border-radius: 8px;
            font-size: 13px;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .copy-btn:hover, .settings-btn:hover {
            background-color: rgba(99, 102, 241, 0.2);
            transform: translateY(-1px);
        }
        
        .chat-container {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background-color: transparent;
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .message {
            margin-bottom: 0;
            border-radius: var(--border-radius);
            overflow: hidden;
            max-width: 80%;
            transition: transform 0.2s ease;
            box-shadow: none;
        }
        
        .message:hover {
            transform: translateY(-2px);
        }
        
        .user-message {
            background-color: rgba(99, 102, 241, 0.1);
            color: var(--light-text);
            padding: 16px;
            margin-left: auto;
            border-radius: var(--message-radius);
            border-bottom-right-radius: 4px;
            box-shadow: none;
        }
        
        .ai-message {
            background-color: rgba(31, 41, 55, 0.1);
            padding: 16px 16px 0;
            margin-right: auto;
            border-radius: var(--message-radius);
            border-bottom-left-radius: 4px;
            overflow: visible;
            box-shadow: none;
            position: relative;
            margin-bottom: 20px;
            width: 100%;
            border: 1px solid rgba(99, 102, 241, 0.2);
            transition: all 0.3s ease;
        }
        
        .ai-message .message-content {
            white-space: pre-wrap;
            position: relative;
            overflow: hidden;
            max-height: 150px;
            transition: max-height 0.5s ease;
        }
        
        .ai-message.expanded .message-content {
            max-height: 5000px;
        }
        
        /* 隐藏旧版元素 */
        .ai-message .preview-content,
        .ai-message .full-content,
        .ai-message > pre {
            display: none !important;
        }
        
        .ai-message .content-mask {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 80px;
            background: linear-gradient(transparent, rgba(31, 41, 55, 0.1) 40%, rgba(31, 41, 55, 0.3) 100%);
            pointer-events: none;
            opacity: 1;
            transition: opacity 0.3s ease;
        }
        
        .ai-message.expanded .content-mask {
            opacity: 0;
        }
        
        /* 底部展开按钮容器 */
        .ai-message .dropdown-container {
            position: relative;
            height: 40px;
            margin-top: 10px;
            text-align: center;
        }
        
        /* 下拉控件 - 增强视觉效果 */
        .ai-message .dropdown-control {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            padding: 6px 15px;
            background-color: rgba(99, 102, 241, 0.15);
            border: 1px solid rgba(99, 102, 241, 0.2);
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            gap: 8px;
            position: relative;
            z-index: 1;
        }
        
        .ai-message .dropdown-control:hover {
            background-color: rgba(99, 102, 241, 0.25);
        }
        
        .ai-message.expanded .dropdown-control {
            background-color: rgba(31, 41, 55, 0.1);
        }
        
        .ai-message .dropdown-control .dropdown-icon {
            background-color: white;
            color: rgba(99, 102, 241, 0.8);
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
        }
        
        .ai-message.expanded .dropdown-control .dropdown-icon {
            transform: rotate(180deg);
        }
        
        .ai-message .dropdown-text {
            font-size: 13px;
            font-weight: 500;
            color: rgba(99, 102, 241, 0.9);
        }
        
        .ai-message code {
            font-family: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
        }
        
        .input-container {
            background-color: transparent;
            padding: 20px;
            border-top: none;
            z-index: 1;
            display: flex;
            justify-content: center;
            box-shadow: none;
        }
        
        .input-group {
            background-color: rgba(55, 65, 81, 0.2);
            border-radius: 24px;
            padding: 4px 4px 4px 12px;
            max-width: 800px;
            width: 95%;
            box-shadow: none;
            transition: var(--transition);
            border: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .input-group:focus-within {
            border-color: transparent;
            box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2);
        }
        
        .form-control {
            background-color: transparent;
            border: none;
            color: var(--light-text);
            padding: 12px 8px 12px 8px;
            border-radius: 24px;
            font-size: 14px;
            flex: 1;
            min-width: 0;
        }
        
        .form-control:focus {
            background-color: transparent;
            color: var(--light-text);
            box-shadow: none;
            border: none;
        }
        
        .form-control::placeholder {
            color: var(--gray-text);
        }
        
        .btn-primary {
            background: linear-gradient(to right, rgba(99, 102, 241, 0.7), rgba(79, 70, 229, 0.7));
            border: none;
            border-radius: 24px;
            padding: 8px 16px;
            font-weight: 500;
            letter-spacing: 0.5px;
            transition: var(--transition);
            box-shadow: none;
            white-space: nowrap;
            min-width: 80px;
            font-size: 13px;
        }
        
        .btn-primary:hover {
            background: linear-gradient(to right, rgba(79, 70, 229, 0.8), rgba(99, 102, 241, 0.8));
            transform: translateY(-1px);
            box-shadow: none;
        }
        
        .btn-secondary {
            background-color: rgba(55, 65, 81, 0.2);
            border: none;
            margin-top: 14px;
            border-radius: 20px;
            padding: 8px 20px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .btn-secondary:hover {
            background-color: rgba(75, 85, 99, 0.3);
            transform: translateY(-1px);
        }
        
        .typing-indicator {
            display: none;
            padding: 16px;
            color: var(--primary-light);
            background-color: rgba(31, 41, 55, 0.1);
            border-radius: var(--message-radius);
            margin-right: auto;
            max-width: 130px;
        }
        
        .typing-indicator span {
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: var(--primary-light);
            border-radius: 50%;
            margin: 0 3px;
            animation: typing 1.4s infinite;
        }
        
        .typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }
        
        @keyframes typing {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }
        
        /* 侧边栏样式 */
        .sidebar {
            width: 60px;
            background-color: transparent;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 15px;
            z-index: 1;
            border-right: none;
        }
        
        .sidebar-icon {
            width: 40px;
            height: 40px;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--gray-text);
            cursor: pointer;
            transition: var(--transition);
            border-radius: 12px;
        }
        
        .sidebar-icon:hover {
            color: var(--primary-color);
            background-color: rgba(99, 102, 241, 0.1);
            transform: translateY(-2px);
        }
        
        .main-content {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        
        .content-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        /* 设置面板样式 */
        .settings-panel {
            position: fixed;
            top: 0;
            right: -350px;
            width: 350px;
            height: 100%;
            background-color: rgba(31, 41, 55, 0.2);
            padding: 20px;
            transition: right 0.3s ease;
            z-index: 1000;
            overflow-y: auto;
            box-shadow: none;
            border-left: none;
        }
        
        .settings-panel.active {
            right: 0;
        }
        
        .settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: none;
        }
        
        .settings-title {
            font-size: 18px;
            margin: 0;
            font-weight: 600;
            background: linear-gradient(to right, var(--primary-light), var(--primary-color));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .close-settings {
            background: none;
            border: none;
            color: var(--gray-text);
            font-size: 24px;
            cursor: pointer;
            transition: var(--transition);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .close-settings:hover {
            color: var(--light-text);
            background-color: rgba(75, 85, 99, 0.3);
        }
        
        .settings-section {
            margin-bottom: 24px;
            background-color: rgba(55, 65, 81, 0.1);
            border-radius: var(--border-radius);
            padding: 16px;
            border: none;
        }
        
        .settings-section h3 {
            font-size: 16px;
            margin-bottom: 15px;
            color: var(--light-text);
            font-weight: 600;
        }
        
        .text-center {
            text-align: center;
            margin-top: 10px;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .sidebar {
                display: none;
            }
            
            .settings-panel {
                width: 300px;
            }
            
            .message {
                max-width: 90%;
            }
        }
        
        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(31, 41, 55, 0.5);
        }
        
        ::-webkit-scrollbar-thumb {
            background: rgba(75, 85, 99, 0.7);
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-color);
        }
        
        .bg-preview {
            width: 100%;
            height: 120px;
            border-radius: var(--border-radius);
            background-color: transparent;
            margin-bottom: 15px;
            border: none;
            background-size: cover;
            background-position: center;
            box-shadow: none;
        }
        
        .bg-options {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .bg-option {
            height: 50px;
            border-radius: 8px;
            cursor: pointer;
            background-size: cover;
            background-position: center;
            border: 2px solid transparent;
            transition: transform 0.2s, border-color 0.2s;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .bg-option:hover {
            transform: scale(1.05);
        }
        
        .bg-option.active {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
        }
        
        .custom-bg {
            padding: 12px;
            background-color: rgba(31, 41, 55, 0.4);
            border-radius: var(--border-radius);
            margin-top: 15px;
        }
        
        .opacity-control {
            width: 100%;
            margin: 15px 0;
            accent-color: var(--primary-color);
            cursor: pointer;
        }
        
        .form-label {
            font-size: 14px;
            margin-bottom: 8px;
            display: block;
            color: var(--gray-text);
        }
        
        .form-control-sm {
            font-size: 13px;
            padding: 8px 12px;
        }
        
        .btn-sm {
            padding: 6px 12px;
            font-size: 13px;
        }
        
        /* 修改发送按钮中svg图标的边距，减少右侧空间 */
        .btn-primary svg {
            margin-right: 2px !important;
        }
        
        /* 添加消息切换动画 */
        .ai-message, .user-message {
            animation: message-fade-in 0.3s ease-out;
        }
        
        @keyframes message-fade-in {
            from { 
                opacity: 0;
                transform: translateY(10px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .ai-message .message-content code {
            font-family: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
            background-color: rgba(31, 41, 55, 0.5);
            padding: 0.2em 0.4em;
            border-radius: 3px;
            font-size: 0.9em;
            color: rgba(165, 180, 252, 0.9);
        }
        
        .ai-message .message-content pre {
            background-color: rgba(17, 24, 39, 0.7) !important;
            border-radius: 6px;
            padding: 0.8em 1em;
            margin: 0.8em 0;
            overflow-x: auto;
        }
        
        .ai-message .message-content pre code {
            background-color: transparent;
            padding: 0;
            border-radius: 0;
            color: inherit;
            font-size: 0.9em;
            line-height: 1.5;
        }
    </style>
</head>
<body th:style="${backgroundImage != '' ? '--bg-image: url(' + backgroundImage + '); --bg-opacity: ' + backgroundOpacity : '--bg-opacity: ' + backgroundOpacity}">
    <div class="container-fluid">
        <div class="main-content">
            <div class="sidebar">
                <div class="sidebar-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
                    </svg>
                </div>
            </div>
            
            <div class="content-area">
                <div class="header">
                    <h1>AI智能助手</h1>
                    <div class="header-buttons">
                        <button class="copy-btn" id="copy-all">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
                                <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
                            </svg>
                            复制
                        </button>
                        <button class="settings-btn" id="open-settings">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
                                <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
                            </svg>
                            设置
                        </button>
                    </div>
                </div>
                
                <div class="chat-container" id="chat-messages">
                    <!-- 消息将在这里显示 -->
                </div>
                
                <div id="typing-indicator" class="typing-indicator">
                    AI正在思考 <span></span><span></span><span></span>
                </div>
                
                <div class="input-container">
                    <form id="question-form">
                        <div class="input-group">
                            <input type="text" id="question-input" class="form-control" placeholder="给 DeepSeek 发送消息..." required>
                            <button type="submit" class="btn btn-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" style="margin-right: 2px;">
                                    <path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083l6-15Zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471-.47 1.178Z"/>
                                </svg>
                                发送
                            </button>
                        </div>
                    </form>
                    <div class="text-center">
                        <button id="clear-chat" class="btn btn-secondary btn-sm">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="margin-right: 4px;">
                                <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5Zm-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5ZM4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5Z"/>
                            </svg>
                            清空对话
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 设置面板 -->
    <div class="settings-panel" id="settings-panel">
        <div class="settings-header">
            <h2 class="settings-title">外观设置</h2>
            <button class="close-settings" id="close-settings">&times;</button>
        </div>
        
        <div class="settings-section">
            <h3>背景图片</h3>
            <div class="bg-preview" id="bg-preview"></div>
            
            <div class="bg-options">
                <div class="bg-option" data-bg="none" style="background-color: #1e1e1e;"></div>
                <div class="bg-option" data-bg="/images/bg/code.jpg" style="background-image: url('/images/bg/code.jpg');"></div>
                <div class="bg-option" data-bg="/images/bg/matrix.jpg" style="background-image: url('/images/bg/matrix.jpg');"></div>
                <div class="bg-option" data-bg="/images/bg/tech.jpg" style="background-image: url('/images/bg/tech.jpg');"></div>
                <div class="bg-option" data-bg="/images/bg/space.jpg" style="background-image: url('/images/bg/space.jpg');"></div>
                <div class="bg-option" data-bg="/images/bg/abstract.jpg" style="background-image: url('/images/bg/abstract.jpg');"></div>
            </div>
            
            <div class="custom-bg">
                <label for="custom-bg-url" class="form-label">自定义背景URL:</label>
                <input type="text" id="custom-bg-url" class="form-control form-control-sm" placeholder="输入图片URL">
                <button id="apply-custom-bg" class="btn btn-primary btn-sm mt-2">应用</button>
            </div>
        </div>
        
        <div class="settings-section">
            <h3>背景不透明度: <span id="opacity-value">95%</span></h3>
            <input type="range" class="opacity-control form-range" id="bg-opacity" min="50" max="100" value="95">
            <div class="d-flex justify-content-between">
                <small>半透明</small>
                <small>不透明</small>
            </div>
        </div>
        
        <div class="settings-section">
            <p class="text-warning">注意: 这里的设置只会在当前浏览器中生效，重置浏览器或在不同设备上访问将使用默认设置或管理员设置的全局背景。</p>
        </div>
        
        <div class="text-center mt-4">
            <button id="reset-settings" class="btn btn-secondary">恢复默认设置</button>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chatMessages = document.getElementById('chat-messages');
            const questionForm = document.getElementById('question-form');
            const questionInput = document.getElementById('question-input');
            const typingIndicator = document.getElementById('typing-indicator');
            const clearChatButton = document.getElementById('clear-chat');
            const copyAllButton = document.getElementById('copy-all');
            
            // 设置相关元素
            const settingsPanel = document.getElementById('settings-panel');
            const openSettingsBtn = document.getElementById('open-settings');
            const closeSettingsBtn = document.getElementById('close-settings');
            const bgOptions = document.querySelectorAll('.bg-option');
            const bgPreview = document.getElementById('bg-preview');
            const customBgUrl = document.getElementById('custom-bg-url');
            const applyCustomBg = document.getElementById('apply-custom-bg');
            const bgOpacity = document.getElementById('bg-opacity');
            const opacityValue = document.getElementById('opacity-value');
            const resetSettings = document.getElementById('reset-settings');
            
            // 获取系统设置的背景（从Thymeleaf变量获取）
            const systemBgImage = document.body.style.getPropertyValue('--bg-image') || 'none';
            const systemBgOpacity = document.body.style.getPropertyValue('--bg-opacity') || '0.95';
            
            // 默认设置
            const defaultSettings = {
                bgImage: systemBgImage !== 'none' ? systemBgImage.replace(/url\(['"]?(.*?)['"]?\)/, '$1') : 'none',
                bgOpacity: parseFloat(systemBgOpacity) * 100
            };
            
            // 初始化背景预览
            if (defaultSettings.bgImage !== 'none') {
                bgPreview.style.backgroundImage = `url(${defaultSettings.bgImage})`;
            } else {
                bgPreview.style.backgroundColor = '#1e1e1e';
            }
            
            // 初始化不透明度显示
            bgOpacity.value = defaultSettings.bgOpacity;
            opacityValue.textContent = `${defaultSettings.bgOpacity}%`;
            
            // 加载保存的设置
            let settings = loadSettings();
            applySettings(settings);
            
            // 设置marked选项，启用代码高亮
            marked.setOptions({
                highlight: function(code, lang) {
                    if (lang && hljs.getLanguage(lang)) {
                        return hljs.highlight(code, { language: lang }).value;
                    }
                    return hljs.highlightAuto(code).value;
                },
                langPrefix: 'hljs language-'
            });
            
            // 加载历史消息
            loadChatHistory();
            
            // 设置面板开关
            openSettingsBtn.addEventListener('click', function() {
                settingsPanel.classList.add('active');
            });
            
            closeSettingsBtn.addEventListener('click', function() {
                settingsPanel.classList.remove('active');
            });
            
            // 背景选项点击事件
            bgOptions.forEach(option => {
                option.addEventListener('click', function() {
                    const bgValue = this.getAttribute('data-bg');
                    
                    // 移除所有选项的active类
                    bgOptions.forEach(opt => opt.classList.remove('active'));
                    
                    // 添加active类到当前选项
                    this.classList.add('active');
                    
                    // 更新预览
                    if (bgValue === 'none') {
                        bgPreview.style.backgroundImage = 'none';
                        bgPreview.style.backgroundColor = '#1e1e1e';
                    } else {
                        bgPreview.style.backgroundImage = `url(${bgValue})`;
                    }
                    
                    // 更新设置并应用
                    settings.bgImage = bgValue;
                    applySettings(settings);
                    saveSettings(settings);
                });
                
                // 设置当前活动的背景选项
                if (option.getAttribute('data-bg') === settings.bgImage) {
                    option.classList.add('active');
                    
                    if (settings.bgImage === 'none') {
                        bgPreview.style.backgroundImage = 'none';
                        bgPreview.style.backgroundColor = '#1e1e1e';
                    } else {
                        bgPreview.style.backgroundImage = `url(${settings.bgImage})`;
                    }
                }
            });
            
            // 自定义背景应用事件
            applyCustomBg.addEventListener('click', function() {
                const customUrl = customBgUrl.value.trim();
                if (customUrl) {
                    // 更新预览
                    bgPreview.style.backgroundImage = `url(${customUrl})`;
                    
                    // 移除所有选项的active类
                    bgOptions.forEach(opt => opt.classList.remove('active'));
                    
                    // 更新设置并应用
                    settings.bgImage = customUrl;
                    applySettings(settings);
                    saveSettings(settings);
                }
            });
            
            // 背景不透明度事件
            bgOpacity.addEventListener('input', function() {
                const value = this.value;
                opacityValue.textContent = `${value}%`;
                
                // 更新设置并应用
                settings.bgOpacity = parseInt(value);
                applySettings(settings);
                saveSettings(settings);
            });
            
            // 重置设置事件
            resetSettings.addEventListener('click', function() {
                // 重置为系统设置，而不是硬编码的默认值
                settings = {...defaultSettings};
                
                // 更新UI
                bgOpacity.value = settings.bgOpacity;
                opacityValue.textContent = `${settings.bgOpacity}%`;
                
                // 移除所有选项的active类
                bgOptions.forEach(opt => {
                    opt.classList.remove('active');
                    if (opt.getAttribute('data-bg') === settings.bgImage) {
                        opt.classList.add('active');
                    }
                });
                
                if (settings.bgImage === 'none') {
                    bgPreview.style.backgroundImage = 'none';
                    bgPreview.style.backgroundColor = '#1e1e1e';
                } else {
                    bgPreview.style.backgroundImage = `url(${settings.bgImage})`;
                }
                
                // 应用设置并保存
                applySettings(settings);
                saveSettings(settings);
            });
            
            // 加载设置
            function loadSettings() {
                const savedSettings = localStorage.getItem('aiAssistantSettings');
                return savedSettings ? JSON.parse(savedSettings) : {...defaultSettings};
            }
            
            // 保存设置
            function saveSettings(settings) {
                localStorage.setItem('aiAssistantSettings', JSON.stringify(settings));
            }
            
            // 应用设置
            function applySettings(settings) {
                // 设置背景图片
                if (settings.bgImage === 'none') {
                    document.documentElement.style.setProperty('--bg-image', 'none');
                } else {
                    document.documentElement.style.setProperty('--bg-image', `url(${settings.bgImage})`);
                }
                
                // 设置背景不透明度
                document.documentElement.style.setProperty('--bg-opacity', settings.bgOpacity / 100);
                
                // 更新不透明度控制UI
                bgOpacity.value = settings.bgOpacity;
                opacityValue.textContent = `${settings.bgOpacity}%`;
            }
            
            questionForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const question = questionInput.value.trim();
                if (!question) return;
                
                // 添加用户消息
                addMessage(question, 'user');
                questionInput.value = '';
                
                // 显示正在输入指示器
                typingIndicator.style.display = 'block';
                
                // 发送请求到后端
                fetch('/api/ai/ask', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ question: question })
                })
                .then(response => response.json())
                .then(data => {
                    // 隐藏正在输入指示器
                    typingIndicator.style.display = 'none';
                    
                    // 添加AI回复
                    addMessage(data.response, 'ai');
                    
                    // 保存聊天历史
                    saveChatHistory();
                })
                .catch(error => {
                    console.error('Error:', error);
                    typingIndicator.style.display = 'none';
                    addMessage('抱歉，发生了错误，请稍后再试。', 'ai');
                });
            });
            
            clearChatButton.addEventListener('click', function() {
                chatMessages.innerHTML = '';
                localStorage.removeItem('chatHistory');
            });
            
            copyAllButton.addEventListener('click', function() {
                const allMessages = chatMessages.textContent;
                navigator.clipboard.writeText(allMessages).then(function() {
                    alert('已复制所有对话内容');
                }).catch(function(err) {
                    console.error('复制失败:', err);
                });
            });
            
            function addMessage(text, sender, sessionId) {
                var messagesContainer = document.getElementById('chat-messages');
                var messageElement = document.createElement('div');
                messageElement.className = sender + '-message';
                
                if (sender === 'user') {
                    messageElement.textContent = text;
                } else {
                    // 创建单一内容区域
                    var contentElement = document.createElement('div');
                    contentElement.className = 'message-content';
                    contentElement.innerHTML = formatText(text);
                    
                    // 创建渐变遮罩
                    var maskElement = document.createElement('div');
                    maskElement.className = 'content-mask';
                    
                    // 创建底部容器
                    var dropdownContainer = document.createElement('div');
                    dropdownContainer.className = 'dropdown-container';
                    
                    // 创建下拉控件
                    var dropdownControl = document.createElement('div');
                    dropdownControl.className = 'dropdown-control';
                    
                    // 创建图标
                    var iconElement = document.createElement('div');
                    iconElement.className = 'dropdown-icon';
                    iconElement.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>';
                    
                    // 创建文本
                    var textElement = document.createElement('div');
                    textElement.className = 'dropdown-text';
                    textElement.textContent = '查看更多';
                    
                    // 组装下拉控件
                    dropdownControl.appendChild(iconElement);
                    dropdownControl.appendChild(textElement);
                    dropdownContainer.appendChild(dropdownControl);
                    
                    // 组装消息元素
                    messageElement.appendChild(contentElement);
                    messageElement.appendChild(maskElement);
                    messageElement.appendChild(dropdownContainer);
                    
                    // 应用代码高亮
                    setTimeout(function() {
                        messageElement.querySelectorAll('pre code').forEach(function(block) {
                            hljs.highlightElement(block);
                        });
                    }, 0);
                    
                    // 添加展开/折叠功能
                    dropdownControl.addEventListener('click', function() {
                        messageElement.classList.toggle('expanded');
                        textElement.textContent = messageElement.classList.contains('expanded') ? '收起内容' : '查看更多';
                    });
                }
                
                messagesContainer.appendChild(messageElement);
                messagesContainer.scrollTop = messagesContainer.scrollHeight;
                
                if (sessionId && sender) {
                    saveChatHistory(text, sender, sessionId);
                }
            }
            
            function saveChatHistory(text, sender, sessionId) {
                var historyKey = 'chatHistory-' + (sessionId || 'default-session');
                var history = localStorage.getItem(historyKey) 
                    ? JSON.parse(localStorage.getItem(historyKey)) 
                    : [];
                
                history.push({
                    text: text,
                    sender: sender
                });
                
                localStorage.setItem(historyKey, JSON.stringify(history));
            }
            
            function loadChatHistory() {
                if (localStorage.getItem('chatHistory')) {
                    var history = JSON.parse(localStorage.getItem('chatHistory'));
                    for (var i = 0; i < history.length; i++) {
                        addMessage(history[i].text, history[i].sender, null);
                    }
                }
            }
            
            // 添加格式化文本的函数
            function formatText(text) {
                // 使用marked解析Markdown内容
                return marked.parse(text);
            }
        });
    </script>
</body>
</html>